<template>
  <div class="demo-test">
    <McHeader :logoImg="'./logo.svg'" :title="'MateChat'">
      <template #operationArea>
        <div class="operations">
          <i class="icon-helping"></i>
        </div>
      </template>
    </McHeader>
    <div v-if="startChat" class="chat-layout">
      <div ref="conversationRef" class="conversation-area">
        <template v-for="(msg, idx) in messages" :key="idx">
          <McBubble v-if="msg.from === 'user'" :content="msg.content" :align="'right'" :avatarConfig="msg.avatarConfig"></McBubble>
          <McBubble v-else :loading="msg.loading ?? false" :avatarConfig="msg.avatarConfig">
            <McMarkdownCard :content="msg.content" :theme="theme"></McMarkdownCard>
            <template #bottom>
              <div class="bubble-bottom-operations">
                <i class="icon-copy-new"></i>
                <i class="icon-like"></i>
                <i class="icon-dislike"></i>
              </div>
            </template>
          </McBubble>
        </template>
      </div>
      <div v-if="showAnalysisPanel" class="analysis-panel">
        <div class="analysis-header">
          <h3>📊 分析结果</h3>
          <button class="close-analysis-btn" @click="closeAnalysisPanel" title="关闭分析结果">
            <i class="icon-close"></i>
          </button>
        </div>
        <div class="analysis-content">
          <McMarkdownCard :content="analysisResult" :theme="theme"></McMarkdownCard>
        </div>
      </div>
    </div>
    <div v-else class="welcome-page">
      <McIntroduction
        logo-img="./logo2x.svg"
        title="MateChat"
        sub-title="Hi，欢迎使用 MateChat"
        :description="[
          'MateChat 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。',
          '作为AI模型，MateChat 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 MateChat 做的更好。',
        ]"
      ></McIntroduction>
      <McPrompt :list="interactiveOptions.list" :direction="'horizontal'" class="intro-prompt" @itemClick="onItemClick($event)"></McPrompt>

    </div>

    <div style="padding: 0 12px 12px 12px">
      <McInput :value="inputValue" :maxLength="2000" @change="(e) => (inputValue = e)" @submit="onSubmit">
        <template #extra>
          <div class="input-foot-wrapper">
            <div class="input-foot-left">
              <span v-for="(item, index) in inputFootIcons" :key="index" @click="() => onInputIconClick(item)">
                <i :class="item.icon"></i>
                {{ item.text }}
              </span>
              <span class="input-foot-dividing-line"></span>
              <span class="input-foot-maxlength">{{ inputValue.length }}/2000</span>
            </div>
            <div class="input-foot-right">
              <d-button icon="op-clearup" shape="round" :disabled="!inputValue" @click="inputValue = ''">清空输入</d-button>
            </div>
          </div>
        </template>
      </McInput>
    </div>

    <!-- 词库弹窗 -->
    <div v-if="showDictionary" class="dictionary-overlay" @click="closeDictionary">
      <div class="dictionary-modal" @click.stop>
        <div class="dictionary-header">
          <h3>📚 智能词库</h3>
          <button class="close-btn" @click="closeDictionary">
            <i class="icon-close"></i>
          </button>
        </div>
        
        <div class="dictionary-search">
          <input 
            v-model="dictionarySearch" 
            @input="onDictionarySearch(dictionarySearch)"
            placeholder="搜索词库内容...支持模糊匹配"
            class="search-input"
            autofocus
          />
          <i class="icon-search search-icon"></i>
        </div>
        
        <div class="dictionary-content">
          <div v-if="filteredDictionary.length === 0" class="no-results">
            <i class="icon-info"></i>
            <p>未找到匹配的词库内容</p>
            <small>尝试使用其他关键词搜索</small>
          </div>
          
          <div v-else class="dictionary-list">
            <div 
              v-for="item in filteredDictionary" 
              :key="item.id" 
              class="dictionary-item"
              @click="onDictionarySelect(item)"
            >
              <div class="item-title">{{ item.title }}</div>
              <div class="item-content">{{ item.content }}</div>
            </div>
          </div>
        </div>
        
        <div class="dictionary-footer">
          <small>💡 提示：点击任意词库项目即可快速插入到输入框</small>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineComponent, nextTick, onMounted } from 'vue';
import { interactiveOptions, simplePrompt, mockAnswer, guessQuestions } from './mock.constants';
import { mockAnswer as mockData } from './mock.constants';

const inputValue = ref('');
const startChat = ref(false);
const conversationRef = ref();
const isAgentOpen = ref(false);
const theme = ref('light');
let themeService: any;
const agentList = ref([
  { label: 'MateChat', value: 'matechat', active: true },
  { label: 'InsCode', value: 'inscode' },
]);
const selectedAgent = ref(agentList.value[0]);
const aiModelAvatar = {
  imgSrc: 'https://matechat.gitcode.com/logo.svg',
  width: 32,
  height: 32,
};
const customerAvatar = {
  imgSrc: 'https://matechat.gitcode.com/png/demo/userAvatar.svg',
  width: 32,
  height: 32,
};
const inputFootIcons = [
  { icon: 'icon-at', text: '智能体' },
  { icon: 'icon-standard', text: '词库' },
  { icon: 'icon-add', text: '附件' },
];

// 词库数据
const dictionaryData = ref([
  { id: 1, title: '肿瘤分期评估', content: '请帮我分析这个患者的TNM分期，并给出治疗建议' },
  { id: 2, title: 'Meta分析选题', content: '我需要进行Meta分析选题建议，研究方向是' },
  { id: 3, title: '文献检索策略', content: '请为我制定专业的文献检索策略，关键词包括' },
  { id: 4, title: '数据提取模板', content: '请帮我设计数据提取表格，需要提取的变量有' },
  { id: 5, title: '统计分析方法', content: '请推荐适合的统计分析方法，研究类型是' },
  { id: 6, title: '异质性评估', content: '请解释这个Meta分析结果中的异质性来源' },
  { id: 7, title: '偏倚风险评估', content: '请帮我评估纳入研究的偏倚风险' },
  { id: 8, title: '森林图解读', content: '请帮我解读这个森林图的结果' },
  { id: 9, title: '漏斗图分析', content: '请分析这个漏斗图是否存在发表偏倚' },
  { id: 10, title: '敏感性分析', content: '请进行敏感性分析，排除' },
  { id: 11, title: '亚组分析', content: '请按照以下变量进行亚组分析' },
  { id: 12, title: 'GRADE评价', content: '请对证据质量进行GRADE评价' },
  { id: 13, title: '临床意义解释', content: '请解释这个结果的临床意义' },
  { id: 14, title: '研究局限性', content: '请分析这个研究的局限性' },
  { id: 15, title: '未来研究方向', content: '基于当前结果，建议未来的研究方向' }
]);

// 词库相关状态
const showDictionary = ref(false);
const dictionarySearch = ref('');
const filteredDictionary = ref(dictionaryData.value);

const messages = ref<Array<any>>([]);
const analysisResult = ref(mockData.result_interpretation || '暂无分析结果');

// 分析结果面板控制
const showAnalysisPanel = ref(false);
const isAnalysisComplete = ref(false);

const onInputIconClick = (e: any) => {
  if (e.icon === 'icon-at') {
    inputValue.value += `@${selectedAgent.value.label}`;
  } else if (e.icon === 'icon-standard') {
    showDictionary.value = true;
    dictionarySearch.value = '';
    filteredDictionary.value = dictionaryData.value;
  }
};

// 词库搜索功能
const onDictionarySearch = (searchText: string) => {
  dictionarySearch.value = searchText;
  if (!searchText.trim()) {
    filteredDictionary.value = dictionaryData.value;
    return;
  }
  
  // 模糊搜索：匹配标题或内容
  filteredDictionary.value = dictionaryData.value.filter(item => 
    item.title.toLowerCase().includes(searchText.toLowerCase()) ||
    item.content.toLowerCase().includes(searchText.toLowerCase())
  );
};

// 选择词库项目
const onDictionarySelect = (item: any) => {
  inputValue.value = item.content;
  showDictionary.value = false;
};

// 关闭词库
const closeDictionary = () => {
  showDictionary.value = false;
  dictionarySearch.value = '';
};

const onSubmit = (e: string, answer: string | undefined = undefined) => {
  if(e === '') {
    return;
  }
  inputValue.value = '';
  if (!messages.value.length) {
    startChat.value = true;
  }
  messages.value.push({
    from: 'user',
    content: e,
    avatarPosition: 'side-right',
    avatarConfig: { ...customerAvatar },
  });
  nextTick(() => {
    conversationRef.value?.scrollTo({
      top: conversationRef.value.scrollHeight,
      behavior: 'smooth',
    });
  });
  getAIAnswer(answer ?? e);
};

const getAIAnswer = (content: string) => {
  messages.value.push({
    from: 'ai-model',
    content: '',
    avatarPosition: 'side-left',
    avatarConfig: { ...aiModelAvatar },
    loading: true,
  });
  
  /* 模拟流式数据返回 */
  setTimeout(async () => {
    const lastMessage = messages.value[messages.value.length - 1];
    lastMessage.loading = false;
    for (let i = 0; i < content.length;) {
      await new Promise<void>((r) => setTimeout(r, 300 * Math.random()));
      messages.value[messages.value.length - 1].content = content.slice(0, i += Math.random() * 10);
      nextTick(() => {
        conversationRef.value?.scrollTo({
          top: conversationRef.value.scrollHeight
        });
      });
    }
    // Ensure the final message content is the complete, non-sliced content.
    messages.value[messages.value.length - 1].content = content;
    
    isAnalysisComplete.value = true;
    
    // 检查回答内容是否包含分析结果相关信息
    if (content.includes('meta分析') || content.includes('统计分析') || content.includes('结果') || content.includes('分析')) {
      showAnalysisPanel.value = true;
      
      // 如果内容包含表格数据，更新分析结果 和 聊天消息中的表格
      if (content.includes('HR') || content.includes('95%-CI') || content.includes('效应模型')) {
        updateAnalysisResult(content); // Updates the analysis panel
        // Also format the table in the main chat message itself
        messages.value[messages.value.length - 1].content = formatAnalysisTable(content);
      }
    }
    // Final scroll to ensure visibility if content height changed due to formatting
    nextTick(() => {
      conversationRef.value?.scrollTo({
        top: conversationRef.value.scrollHeight
      });
    });
  }, 1000);
};

// 更新分析结果内容
const updateAnalysisResult = (content: string) => {
  // This function is called when getAIAnswer determines that content likely contains
  // table-worthy data (HR, 95%-CI, or 效应模型).
  // We can directly pass to formatAnalysisTable, which will handle actual formatting.
  analysisResult.value = formatAnalysisTable(content);
};

// 格式化分析表格
const formatAnalysisTable = (content: string) => {
  const lines = content.split('\n');
  const newContentLines: string[] = [];
  let inTableBlock = false; // Are we currently processing a block of lines that constitute a table?
  let tableHeaderAdded = false; // Has the Markdown header for the current table block been added?

  for (const line of lines) {
    const isDataLineWithMatch = line.match(/^\s*(.+?)\s+(\d+\.\d+)\s+\[(\d+\.\d+);\s*(\d+\.\d+)\]\s+(\d+\.\d+)\s+(\d+\.\d+)/);
    const isSummaryLineWithMatch = line.match(/(Common effect model|Random effects model)\s+(\d+\.\d+)\s+\[(\d+\.\d+);\s*(\d+\.\d+)\]/);
    
    // Keywords for less structured but still table-indicative lines
    const isGenericDataLine = line.includes('HR') && line.includes('95%-CI') && line.includes('[') && line.includes(']');
    const isGenericSummaryLine = line.includes('Common effect model') || line.includes('Random effects model');

    if (isDataLineWithMatch) {
      if (!tableHeaderAdded) {
        newContentLines.push('\n## 📊 Meta分析结果表格\n');
        newContentLines.push('| 研究名称 | HR值 | 95%置信区间 | 权重(固定) | 权重(随机) |');
        newContentLines.push('|----------|------|-------------|-----------|-----------|');
        tableHeaderAdded = true;
      }
      inTableBlock = true; 

      const [, study, hr, ciLow, ciHigh, wCommon, wRandom] = isDataLineWithMatch;
      const studyName = study.replace(/\s*\(\s*\d{4}\s*\)\s*$/, '').trim();
      newContentLines.push(`| ${studyName} | ${hr} | [${ciLow}; ${ciHigh}] | ${wCommon}% | ${wRandom}% |`);
    } else if (isSummaryLineWithMatch) {
      if (!tableHeaderAdded) {
        newContentLines.push('\n## 📊 Meta分析结果表格\n');
        newContentLines.push('| 研究名称 | HR值 | 95%置信区间 | 权重(固定) | 权重(随机) |');
        newContentLines.push('|----------|------|-------------|-----------|-----------|');
        tableHeaderAdded = true;
      }
      inTableBlock = true;

      const [, model, hr, ciLow, ciHigh] = isSummaryLineWithMatch;
      const modelName = model === 'Common effect model' ? '固定效应模型' : '随机效应模型';
      newContentLines.push(`| **${modelName}** | **${hr}** | **[${ciLow}; ${ciHigh}]** | - | - |`);
    } else if (isGenericDataLine || isGenericSummaryLine) {
      // Handle lines that look like table data but might not fit the strict regex,
      // or if the regex parsing above failed for some reason.
      if (!tableHeaderAdded) {
        newContentLines.push('\n## 📊 Meta分析结果表格\n');
        newContentLines.push('| 研究名称 | HR值 | 95%置信区间 | 权重(固定) | 权重(随机) |');
        newContentLines.push('|----------|------|-------------|-----------|-----------|');
        tableHeaderAdded = true;
      }
      inTableBlock = true;
      // Attempt to push the line as a raw table row if it seems like one,
      // or just the line itself if it's not clearly formattable but indicates table context.
      // For simplicity, we'll push the raw line. More complex parsing could be added here.
      newContentLines.push(line.startsWith('|') ? line : `| ${line.trim()} | | | | |`);


    } else {
      // This line is not a data line or summary line.
      if (inTableBlock && (line.trim() === '' || line.includes('Number of studies'))) {
        // This line signifies the end of the current table block or related information.
        if (line.includes('Number of studies')) {
          newContentLines.push('\n### 📈 统计分析摘要\n');
          newContentLines.push(line);
        } else {
          newContentLines.push(line); // Push the empty line or other non-data/summary line
        }
        // Reset flags so a new, distinct table could potentially start later in the content.
        inTableBlock = false;
        tableHeaderAdded = false;
      } else {
        // Not a table line, and not an end-of-table-block marker for an active table.
        // Just push the line as is. This preserves text before/after/between tables.
        newContentLines.push(line);
      }
    }
  }
  
  return newContentLines.join('\n');
};

// 关闭分析结果面板
const closeAnalysisPanel = () => {
  showAnalysisPanel.value = false;
};

const onNewConvo = () => {
  startChat.value = false;
  messages.value = [];
  showAnalysisPanel.value = false;
  isAnalysisComplete.value = false;
  analysisResult.value = mockData.result_interpretation || '暂无分析结果';
};

interface MockItem {
  value: string;
  label: string;
  [key: string]: any;
}

const onItemClick = (item: MockItem) => {
  const key = item.value;
  if (typeof mockAnswer[key] === 'string') {
    // 使用 mock 数据
    onSubmit(item.label, mockAnswer[key]);
  }
};

const themeChange = () => {
  if (themeService) {
    theme.value = themeService.currentTheme.id === 'infinity-theme' ? 'light' : 'dark';
  }
}

onMounted(() => {
  if(typeof window !== 'undefined'){
    themeService = (window as any)['devuiThemeService'];
  }
  themeChange();
  if (themeService && themeService.eventBus) {
    themeService.eventBus.add('themeChanged', themeChange);
  }
});
</script>

<style scoped lang="scss">
.demo-test {
  width: 100%;
  height: calc(100vh - 180px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto;
  min-height: 600px;
  background: linear-gradient(135deg, var(--devui-base-bg) 0%, var(--devui-global-bg) 100%);
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  
  & > * {
    position: relative;
    z-index: 1;
  }
  
  @media (max-width: 768px) {
    height: calc(100vh - 120px);
    min-height: 500px;
    gap: 8px;
  }
  
  @media (max-height: 600px) {
    height: calc(100vh - 100px);
    min-height: 400px;
  }

  .chat-layout {
    flex: 1;
    display: flex;
    gap: 20px;
    padding: 0 24px;
    overflow: hidden;
    min-height: 0;
  }

  .conversation-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: auto;
    padding: 20px;
    min-width: 0;
    background: var(--devui-base-bg);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid var(--devui-line);
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    
    &::-webkit-scrollbar-thumb {
      background: var(--devui-icon-text);
      border-radius: 3px;
      opacity: 0.3;
    }
    
    &::-webkit-scrollbar-thumb:hover {
      opacity: 0.6;
    }
  }

  .analysis-panel {
    
    min-width: 300px;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    background: var(--devui-base-bg);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid var(--devui-line);
    overflow: hidden;
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    
    &::-webkit-scrollbar-thumb {
      background: var(--devui-icon-text);
      border-radius: 3px;
      opacity: 0.3;
    }
    
    &::-webkit-scrollbar-thumb:hover {
      opacity: 0.6;
    }
  }

  @media (max-width: 1200px) {
    .analysis-panel {
      width: 350px;
      min-width: 280px;
    }
  }

  @media (max-width: 768px) {
    .chat-layout {
      flex-direction: column;
      gap: 16px;
      padding: 0 12px;
    }
    
    .conversation-area {
      padding: 16px;
      border-radius: 12px;
    }
    
    .analysis-panel {
      width: 100%;
      min-width: unset;
      max-width: unset;
      border-radius: 12px;
      max-height: 300px;
    }
    
    .welcome-page {
      padding: 24px 16px;
      gap: 24px;
      border-radius: 16px;
    }
    
    .guess-question {
      padding: 20px 16px;
      border-radius: 12px;
    }
  }

  .analysis-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--devui-line);
    background: linear-gradient(135deg, var(--devui-global-bg) 0%, var(--devui-base-bg) 100%);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 24px;
      right: 24px;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, var(--devui-line) 50%, transparent 100%);
    }
  }

  .analysis-header h3 {
    margin: 0;
    font-size: var(--devui-font-size-lg);
    font-weight: 600;
    color: var(--devui-text);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .close-analysis-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: var(--devui-icon-text);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &:hover {
      background: var(--devui-icon-hover-bg);
      color: var(--devui-text);
      transform: scale(1.1);
    }
    
    &:active {
      transform: scale(0.95);
    }
    
    i {
      font-size: 16px;
    }
  }

  .analysis-content {
    flex: 1;
    overflow: auto;
    padding: 20px 24px;
  }

  .welcome-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 40px 24px;
    gap: 40px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    background: var(--devui-base-bg);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(20px);
    border: 1px solid var(--devui-line);
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    }
  }

  .guess-question {
    width: 100%;
    padding: 28px 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--devui-global-bg) 0%, var(--devui-gray-form-control-bg) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--devui-line);
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    }

    .guess-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--devui-text);
      margin-bottom: 16px;

      & > div:first-child {
        font-weight: 700;
        font-size: var(--devui-font-size);
      }
      & > div:last-child {
        font-size: var(--devui-font-size-sm);
        cursor: pointer;
        span {
          margin-left: 4px;
        }
      }
    }

    .guess-content {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      span {
        font-size: var(--devui-font-size-sm);
        color: var(--devui-text);
        padding: 8px 18px;
        border-radius: 20px;
        background: var(--devui-base-bg);
        border: 1px solid var(--devui-line);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
          transition: left 0.5s;
        }
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          border-color: var(--devui-brand);
          
          &::before {
            left: 100%;
          }
        }
        
        &:active {
          transform: translateY(0);
        }
      }
    }
  }

  .bubble-bottom-operations {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    i {
      padding: 8px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid transparent;
      color: var(--devui-icon-text);

      &:hover {
        background-color: var(--devui-icon-hover-bg);
        border-color: var(--devui-line);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
  }

  .new-convo-button {
    padding: 12px 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 48px;
    gap: 12px;
    flex-shrink: 0;
    background: var(--devui-base-bg);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--devui-line);
    margin: 0 12px;
  }

  @media (max-width: 768px) {
    .new-convo-button {
      padding: 8px 12px;
      min-height: 44px;
      margin: 0 8px;
      border-radius: 12px;
      gap: 8px;
    }
    
    .agent-knowledge {
      .agent-wrapper {
        padding: 6px 12px;
        border-radius: 10px;
        
        img {
          width: 18px;
          height: 18px;
        }
        
        span {
          font-size: var(--devui-font-size-sm);
        }
      }
      
      .knowledge-wrapper {
        font-size: var(--devui-font-size-sm);
        padding: 6px 10px;
        border-radius: 6px;
      }
      
      .agent-knowledge-dividing-line {
        margin: 0 12px;
      }
    }
  }

  :deep(.simple-prompt .mc-list) {
    justify-content: unset;
  }

  :deep(.intro-prompt .mc-list) {
    justify-content: center;
    gap: 16px;
  }

  .operations {
    i {
      padding: 6px;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background: var(--devui-global-bg);
      }
    }
  }

  .agent-knowledge {
    flex: 1;
    display: flex;
    align-items: center;

    .agent-wrapper {
      display: flex;
      align-items: center;
      padding: 8px 16px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--devui-global-bg) 0%, var(--devui-area) 100%);
      border: 1px solid var(--devui-line);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: var(--devui-brand);
      }

      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
        border-radius: 4px;
      }

      span {
        font-size: var(--devui-font-size);
        color: var(--devui-text);
        margin-right: 8px;
        font-weight: 500;
      }

      i {
        font-size: var(--devui-font-size);
        color: var(--devui-text);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &:last-child {
          margin-left: 4px;
        }
      }

      .is-open {
        transform: rotate(180deg);
      }
    }

    .agent-knowledge-dividing-line {
      width: 1px;
      height: 20px;
      margin: 0 16px;
      background: linear-gradient(to bottom, transparent 0%, var(--devui-line) 50%, transparent 100%);
    }

    .knowledge-wrapper {
      font-size: var(--devui-font-size);
      color: var(--devui-text);
      cursor: pointer;
      padding: 8px 12px;
      border-radius: 8px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid transparent;
      
      &:hover {
        background: var(--devui-global-bg);
        border-color: var(--devui-line);
        transform: translateY(-1px);
      }

      span {
        margin-left: 6px;
        font-weight: 500;
      }
    }
  }

  .input-foot-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-right: 8px;

    .input-foot-left {
      display: flex;
      align-items: center;
      gap: 12px;

      span {
        font-size: var(--devui-font-size-sm);
        color: var(--devui-text);
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 4px 8px;
        border-radius: 6px;
        
        &:hover {
          background: var(--devui-global-bg);
          color: var(--devui-brand);
        }
      }

      .input-foot-dividing-line {
        width: 1px;
        height: 16px;
        background-color: var(--devui-line);
      }

      .input-foot-maxlength {
        font-size: var(--devui-font-size-sm);
        color: var(--devui-aide-text);
      }
    }

    .input-foot-right {
      & > *:not(:first-child) {
        margin-left: 12px;
      }
    }
  }

  // 词库弹窗样式
  .dictionary-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
  }

  .dictionary-modal {
    background: var(--devui-base-bg);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--devui-line);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
    overflow: hidden;
  }

  .dictionary-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--devui-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--devui-global-bg) 0%, var(--devui-base-bg) 100%);
    
    h3 {
      margin: 0;
      font-size: var(--devui-font-size-lg);
      font-weight: 600;
      color: var(--devui-text);
    }
    
    .close-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;
      color: var(--devui-icon-text);
      transition: all 0.3s ease;
      
      &:hover {
        background: var(--devui-icon-hover-bg);
        color: var(--devui-text);
      }
    }
  }

  .dictionary-search {
    padding: 20px 24px;
    border-bottom: 1px solid var(--devui-line);
    position: relative;
    
    .search-input {
      width: 100%;
      padding: 12px 16px 12px 40px;
      border: 1px solid var(--devui-line);
      border-radius: 12px;
      background: var(--devui-global-bg);
      color: var(--devui-text);
      font-size: var(--devui-font-size);
      transition: all 0.3s ease;
      
      &:focus {
        outline: none;
        border-color: var(--devui-brand);
        box-shadow: 0 0 0 3px rgba(94, 124, 224, 0.1);
      }
      
      &::placeholder {
        color: var(--devui-aide-text);
      }
    }
    
    .search-icon {
      position: absolute;
      left: 36px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--devui-aide-text);
      font-size: 16px;
    }
  }

  .dictionary-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    
    &::-webkit-scrollbar-thumb {
      background: var(--devui-icon-text);
      border-radius: 3px;
      opacity: 0.3;
    }
  }

  .no-results {
    text-align: center;
    padding: 40px 24px;
    color: var(--devui-aide-text);
    
    i {
      font-size: 48px;
      margin-bottom: 16px;
      display: block;
    }
    
    p {
      margin: 0 0 8px 0;
      font-size: var(--devui-font-size);
    }
    
    small {
      font-size: var(--devui-font-size-sm);
    }
  }

  .dictionary-list {
    padding: 0 16px;
  }

  .dictionary-item {
    padding: 16px 20px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: var(--devui-global-bg);
    border: 1px solid var(--devui-line);
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      border-color: var(--devui-brand);
      background: var(--devui-base-bg);
    }
    
    .item-title {
      font-weight: 600;
      color: var(--devui-text);
      margin-bottom: 8px;
      font-size: var(--devui-font-size);
    }
    
    .item-content {
      color: var(--devui-aide-text);
      font-size: var(--devui-font-size-sm);
      line-height: 1.5;
    }
  }

  .dictionary-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--devui-line);
    background: var(--devui-global-bg);
    text-align: center;
    
    small {
      color: var(--devui-aide-text);
      font-size: var(--devui-font-size-sm);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (max-width: 768px) {
    .dictionary-modal {
      width: 95%;
      max-height: 85vh;
    }
    
    .dictionary-header {
      padding: 16px 20px;
      
      h3 {
        font-size: var(--devui-font-size);
      }
    }
    
    .dictionary-search {
      padding: 16px 20px;
    }
    
    .dictionary-item {
      padding: 12px 16px;
      
      .item-title {
        font-size: var(--devui-font-size-sm);
      }
      
      .item-content {
        font-size: 12px;
      }
    }
  }
}
</style>